package com.pj.compose.ui.page.widget

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Divider
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import androidx.navigation.compose.rememberNavController
import com.pj.compose.ui.compose.AppTopBarColumn

@Composable
fun ButtonsPage(navController: NavController) {
    val buttonColors = ButtonDefaults.buttonColors(
        containerColor = Color.White,
        contentColor = Color.White
    )
    val buttonBorder = BorderStroke(width = 1.dp, color = MaterialTheme.colorScheme.primary)
    AppTopBarColumn(title = "Button", backClick = { navController.popBackStack() }) {
        Column(
            modifier = Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            //      圆角为短边的一半
            Button(
                onClick = {},
                modifier = Modifier
                    .padding(top = 15.dp)
                    .height(40.dp)
                    .padding(horizontal = 20.dp),
                shape = RoundedCornerShape(20.dp),
                border = buttonBorder,
                colors = buttonColors
            ) {
                Text(text = "圆角为短边的一半", color = MaterialTheme.colorScheme.primary)
            }

            Divider(modifier = Modifier.padding(vertical = 15.dp))
//      指定圆角的大小
            Button(
                onClick = {},
                modifier = Modifier
                    .padding(1.dp)
                    .height(40.dp),
                shape = RoundedCornerShape(5.dp),
                border = buttonBorder,
                colors = buttonColors
            ) {
                Text(text = "指定圆角的大小", color = MaterialTheme.colorScheme.primary)
            }

            Divider(modifier = Modifier.padding(vertical = 15.dp))

//      指定方向
            val directionButtonSize = 60.dp
            Row {
                Button(
                    onClick = {},
                    modifier = Modifier
                        .padding(1.dp)
                        .size(directionButtonSize),
                    shape = RoundedCornerShape(topStart = 5.dp),
                    border = buttonBorder,
                    colors = buttonColors
                ) {
                    Text(text = "指", color = MaterialTheme.colorScheme.primary)
                }
                Button(
                    onClick = {},
                    modifier = Modifier
                        .padding(1.dp)
                        .size(directionButtonSize),
                    shape = RoundedCornerShape(topEnd = 5.dp),
                    border = buttonBorder,
                    colors = buttonColors
                ) {
                    Text(text = "定", color = MaterialTheme.colorScheme.primary)
                }
            }
            Row {
                Button(
                    onClick = {},
                    modifier = Modifier
                        .padding(1.dp)
                        .size(directionButtonSize),
                    shape = RoundedCornerShape(bottomStart = 5.dp),
                    border = buttonBorder,
                    colors = buttonColors
                ) {
                    Text(text = "方", color = MaterialTheme.colorScheme.primary)
                }
                Button(
                    onClick = {},
                    modifier = Modifier
                        .padding(1.dp)
                        .size(directionButtonSize),
                    shape = RoundedCornerShape(bottomEnd = 5.dp),
                    border = buttonBorder,
                    colors = buttonColors
                ) {
                    Text(text = "向", color = MaterialTheme.colorScheme.primary)
                }
            }

            Divider(modifier = Modifier.padding(vertical = 15.dp))

//      更改文字、边框和背景颜色
//        val alpha = 1f
//        val alphaState by animateFloatAsState(targetValue = alpha)
            Text(text = "指定文字颜色、边框颜色及其点击状态")
            Button(
                onClick = {},
                modifier = Modifier
                    .padding(top = 10.dp)
                    .height(40.dp)
                    .padding(horizontal = 20.dp)
                    .clickable { },
                elevation = ButtonDefaults.buttonElevation(
                    defaultElevation = 5.dp,
                    pressedElevation = 10.dp
                ),
                shape = RoundedCornerShape(20.dp),
                border = buttonBorder,
                colors = ButtonDefaults.buttonColors(
                    containerColor = Color(0x9988eeff),
                )
            ) {
                Text(text = "更改文字、边框和背景颜色", color = MaterialTheme.colorScheme.primary, fontWeight = FontWeight.Bold)
            }

        }
    }

}


@Preview(showBackground = true)
@Composable
private fun ButtonsPagePrev() {
    ButtonsPage(rememberNavController())
}